<!--
* @Author: zhangjing
* @Date: 2025-05-07 09:49:15
* @Description: 分组统计=>
-->
<template>
	<div style="height: 100%">
		<template v-if="operateType == 'rank'">
			<Chart :optionData="option_column" style="height: 100%; padding-bottom: 10px"></Chart>
		</template>
		<template v-if="operateType == 'detail'">
			<div class="answerStu" v-for="(group, gindex) in countData" :key="gindex">
				<div class="title">{{ group.groupName }}</div>
				<div class="tablelist">
					<div class="list">
						<div
							class="item"
							:class="{ unknown: !item.answer }"
							v-for="(item, index) in group.studentList"
							:key="index"
						>
							<div class="flex flex-pack-justify">
								<span class="name" :title="item.studName">{{ item.studName }}</span>
								<b
									v-if="item.answer"
									:style="{
										color: !isCorrect(item.answer)
											? '#5480DB'
											: isCorrect(item.answer) == '1'
											? '#00BEC5'
											: '#D60000',
									}"
									>{{ item.answer }}</b
								>
								<img v-else src="/impromptu/unknown.png" style="width: 20px; height: 20px" />
							</div>
							<p class="time" v-if="item.answer">所用时间：{{ item.time }}s</p>
						</div>
					</div>
				</div>
			</div>
		</template>
	</div>
</template>

<script>
const colorList = ['#70A2F4', '#FFAA00', '#00BEC5', '#C6AFFB', '#FBDB5B', '#FA6401', '#80E8A6', '#CCCCCC'];
const primaryColor = '#00BEC5';
import Chart from '@/components/z-charts.vue';
export default {
	data() {
		return {
			countData: [],
			option_column: {
				textStyle: {
					color: '#c0c3cd',
					fontSize: 14,
				},
				grid: {
					containLabel: true,
					left: 40,
					right: 40,
					bottom: 100,
					top: 80,
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						// 坐标轴指示器，坐标轴触发有效
						type: 'none', // 默认为直线，可选为：'line' | 'shadow'
					},
					show: true,
					confine: true,
					backgroundColor: 'rgba(255,255,255)',
					extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);',
					textStyle: {
						color: '#505050',
					},
					formatter: function (param) {
						let name = param[0].name;
						let value = param[0].value;
						let color = colorList[param[0].dataIndex];

						return (
							'<div style="display:flex;justify-content: space-between;align-items: center;">' +
							'<i style="height:10px;width:10px;border-radius: 50px;display:block;margin-right:10px;background:' +
							color +
							';"></i><span style="flex:1">' +
							name +
							'正确率:</span><span style="font-weight:bold;font-size: 16px;color:' +
							primaryColor +
							';">' +
							value +
							'</span>%</div>'
						);
					},
				},
				xAxis: {
					nameTextStyle: {
						color: '#ffffff',
						padding: [0, 0, -10, 0],
						fontSize: 14,
					},
					axisLabel: {
						color: primaryColor,
						fontSize: 22,
						fontWeight: 700,
						interval: 0,
					},
					axisTick: {
						show: false,
						lineStyle: {
							color: '#384267',
						},
					},
					splitLine: {
						show: false,
					},
					axisLine: {
						lineStyle: {
							color: primaryColor,
							width: 4,
						},
						show: true,
					},
					data: [],
					type: 'category',
				},
				yAxis: {
					nameTextStyle: {
						color: '#ffffff',
						padding: [0, 0, -10, 0],
						fontSize: 14,
					},
					axisLabel: {
						show: false,
						color: '#ffffff',
						fontSize: 14,
					},
					axisTick: {
						show: false,
					},
					splitLine: {
						show: false,
						lineStyle: {
							color: '#335971',
							// "type": "dashed"
						},
					},
					axisLine: {
						lineStyle: {
							color: '#668092',
							width: 1,
							// "type": "dashed"
						},
						show: false,
					},
					name: '',
				},
				series: [
					{
						data: [],
						type: 'bar',
						barMaxWidth: 'auto',
						barWidth: 30,
						itemStyle: {
							normal: {
								barBorderRadius: 0,
								color: (params) => {
									return colorList[params.dataIndex];
								},
							},
						},
						label: {
							show: true,
							position: 'top',
							distance: 10,
							color: primaryColor,
							formatter: function (data) {
								return data.value + '%';
							},
							align: 'center',
							rich: {
								c: {
									fontWeight: 'bold',
									fontSize: 18,
									color: primaryColor,
								},
							},
						},
					},
				],
			},
		};
	},
	props: {
		operateType: {
			type: String,
			default: 'rank',
		},
		curTopic: {
			type: Object,
			default: () => {},
		},
	},
	components: {
		Chart,
	},
	methods: {
		//判断作答结果是否正确
		isCorrect(answerResult) {
			let totalanswer = this.curTopic.answer;
			if (this.curTopic.topicType == 5) {
				if (totalanswer || totalanswer === 0) {
					answerResult = parseFloat(answerResult);
					if (totalanswer == answerResult) {
						return '1';
					} else {
						return '0';
					}
				} else {
					return '';
				}
			} else {
				if (totalanswer) {
					if (totalanswer == answerResult) {
						return '1';
					} else {
						return '0';
					}
				} else {
					return '';
				}
			}
		},
		//临时题统计
		getGroupReportData(sdQuestId) {
			this.$postAction(this.$sysManageapi.reportUrl.getGroupReportData, {
				sdQuestId: sdQuestId,
			}).then((res) => {
				if (res && res.code == 1) {
					console.log('统计结果=' + JSON.stringify(res));
					this.countData = res.data;
					let data = [],
						xAxis = [];
					this.countData.forEach((item) => {
						data.push(item.averagePassRate);
						xAxis.push(item.groupName);
					});
					this.option_column.xAxis.data = xAxis;
					this.option_column.series[0].data = data;
				}
			});
		},
	},
};
</script>

<style lang="less" scoped>
//作答学生
.answerStu {
	.title {
		font-size: 30px;
		font-weight: 700;
		color: #333333;
		padding: 10px 22px;
		text-align: left;
	}

	.tablelist {
		height: calc(100% - 40px);
		overflow: auto;

		.list {
			display: grid;
			grid-template-columns: repeat(6, calc((100% - 100px) / 6));
			row-gap: 16px;
			column-gap: 20px;
			line-height: 1;
			padding: 0 22px 20px;

			.item {
				background: rgba(84, 128, 219, 0.2);
				border-radius: 6px;
				/* padding: 9px 16px; */
				padding: 9px 10px 0;
				height: 78px;
				position: relative;
				cursor: pointer;
				@media screen and (max-width: 1366px) {
					padding: 9px 10px 0;
				}
				.name {
					color: #5480db;
					font-weight: 700;
					font-size: 20px;
					width: 5em;
					word-wrap: break-word;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					text-overflow: ellipsis;
					text-align: left;
					height: 42.5px;
				}
				b {
					width: 2em;
					word-wrap: break-word;
					text-align: right;
				}
				.time {
					color: #333333;
					font-weight: 400;
					font-size: 16px;
					margin: 16px 0 8px;
					position: absolute;
					bottom: 0;
					left: 8px;
				}

				&.unknown {
					background: rgba(190, 202, 212, 0.2);
				}
			}
		}
	}
}
</style>
